<template>
	<view class="realName">
		<!-- <header-box :title="pageTitle"></header-box> -->
		<view class="realName-box" v-if="!isReal">
			<view class="realName-item">
				<view class="_item-label"><text>姓名</text></view>
				<view class="_item-val"><input class="_item-val-input" type="text" v-model="realNameData.certName" :disabled="userInfo && userInfo.authState == 1" placeholder="请输入姓名" placeholder-style="color:#5E6272;" /></view>
			</view>
			<view class="realName-item">
				<view class="_item-label"><text>身份证</text></view>
				<view class="_item-val"><input class="_item-val-input" type="idcard" v-model="realNameData.certNo" :disabled="userInfo && userInfo.authState == 1" placeholder="请输入中国大陆身份证号码" placeholder-style="color:#5E6272;" /></view>
			</view>
			<view class="realName-btn" :class="realNameFlag?'realName-btn-on':''" @click="confirmRealName" v-if="userInfo && userInfo.authState != 1">
				<text>确定</text>
			</view>
		</view>
		<view class="realName-box" v-if="isReal">
			<view class="realName-success"><image class="realName-success-icon" src="../../static/img/success-icon.png" mode=""></image></view>
			<view class="realName-success-tips"><text>您已进行实名认证</text></view>
			
			<view class="realName-view">
				<view class="realName-view-label"><text>姓名</text></view>
				<view class="realName-view-val"><text>{{realNameData.certName}}</text></view>
				<view class="realName-view-label" style="margin-top: 56rpx;"><text>身份证</text></view>
				<view class="realName-view-val"><text>{{realNameData.certNo}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle:'实名认证',
				videoSrc:'',
				realNameData:{ //[初始化实人认证入参]
					"certName": "", //姓名
					"certNo": "", //身份证号
					"metaInfo": "", //MetaInfo环境参数
					"returnUrl": "" //回调地址 .h5 必填
				},
				certifyId:'',
				realNameFlag:false,
				userInfo:null,
				isReal:false,
			};
		},
		watch:{
			'realNameData.certName': {
				handler:function(e) {
					// console.log(e)
					if (e && this.realNameData.certNo) {
						this.realNameFlag = true;
					} else {
						this.realNameFlag = false;
					}
				}
			},
			'realNameData.certNo': {
				handler:function(e) {
					// console.log(e)
					if (e && this.realNameData.certName) {
						this.realNameFlag = true;
					} else {
						this.realNameFlag = false;
					}
				}
			}
		},
		onLoad() {
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = uni.getStorageSync('userInfo');
				console.log(this.userInfo);
				if (this.userInfo.authState == 1) {
					this.isReal = true;
					// uni.showToast({
					// 	title:'您已通过实名认证',
					// 	icon:'none'
					// })
				} else {
					this.isReal = false
				}
				this.realNameData.certName = this.userInfo.realName;
				// console.log(realNameData.certName);
				this.realNameData.certNo = this.userInfo.idCard;
				// console.log(realNameData.certNo);
			}
			if (uni.getStorageSync('realNameData')) {
				let realNameData = uni.getStorageSync('realNameData');
				this.realNameData.certName = realNameData.certName;
				this.realNameData.certNo = realNameData.certNo;
			}
			if (this.$util.getUrlVal().response) {
				let response = this.$util.getUrlVal().response
				let responseData = decodeURIComponent(response)
				// console.log(JSON.parse(responseData.split('#')[0]))
				let responseDataJson = JSON.parse(responseData.split('#')[0]);
				if (responseDataJson.code == 1000) {
					this.certifyId = responseDataJson.extInfo.certifyId;
					this.$api.describeFaceVerify({certifyId:this.certifyId}).then(data => {
						// console.log(data)
						if (data.code == 200) {
							if (data.data.verifyResult == '1') {
								
								this.userInfo.idCard = this.realNameData.certNo;
								this.userInfo.realName = this.realNameData.certName;
								this.userInfo.authState = 1;
								this.$api.getUpdUserInfo(this.userInfo).then(resp => {
									console.log(resp)
									if (resp.code == 200) {
										this.$api.getUserInfo().then(respp => {
											console.log(respp)
											if (respp.code == 200) {
												this.userInfo = respp.data;
												uni.setStorageSync('userInfo',respp.data)
												uni.removeStorageSync('realNameData')
												uni.showToast({
													title:'认证成功',
													icon:'none'
												})
												setTimeout(() => {
													// uni.reLaunch({
													// 	url:'/pages/myCenter/myCenter'
													// })
													if (Window) {
														let link = window.location.origin+''+window.location.pathname+'#/pages/myCenter/myCenter'
														// let winRef = window.open('url','_blank')
														// winRef.location = link;
														window.location.replace(link)
													}
												},1500)
											} else {
												this.checkLogin(`/pages/realName/realName`)
											}
										})
									}
								})
							} else {
								uni.showToast({
									title:'认证失败',
									icon:'none'
								})
							}
						}
					})
				} else {
					let status = {
						'1001':'系统错误',
						'1003':'验证中断',
						'2002':'网络错误',
						'2003':'客户端设备时间错误',
						'2006':'刷脸失败'
					}
					uni.showToast({
						title:status[responseDataJson.code]?status[responseDataJson.code]:'未知错误',
						icon:'none'
					})
				}
			}
			let metaInfo = getMetaInfo();
			this.realNameData.metaInfo = JSON.stringify(metaInfo)
			// #ifdef H5
			if (window) {
				this.realNameData.returnUrl = window.location.href;
			}
			// #endif
		},
		methods:{
			confirmRealName() {
				if (!this.realNameData.metaInfo) {
					uni.showToast({
						title:'初始化失败，请重新进入',
						icon:'none'
					})
					return false
				}
				if (!this.realNameData.certName) {
					uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
					return false
				}
				if (!uni.$u.test.idCard(this.realNameData.certNo)) {
					uni.showToast({
						title:'身份证号码格式错误',
						icon:'none'
					})
					return false
				}
				this.$api.initFaceVerify(this.realNameData).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.setStorageSync('realNameData',{
							certName:this.realNameData.certName,
							certNo:this.realNameData.certNo
						})
						let link = res.data.certifyUrl;
						// let winRef = window.open('url','_blank')
						// winRef.location = link;
						window.location.replace(link)
						// window.open(res.data.certifyUrl,'_blank')
						
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.realName{
		width: 100%;
		min-height: 100vh;
		background-color: #16181D;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		display: flow-root;
		.realName-box{
			padding: 0 48rpx;
			box-sizing: border-box;
			.realName-item{
				margin-top: 56rpx;
				._item-label{
					font-size: 24rpx;
					color: #5E6272;
				}
				._item-val{
					._item-val-input{
						width: 100%;
						height: 96rpx;
						border: 0;
						line-height: 96rpx;
						font-weight: 600;
						color: #ffffff;
						font-size: 32rpx;
						border-bottom: 2rpx solid #262A34;
					}
				}
			}
			.realName-btn{
				width: 686rpx;
				height: 88rpx;
				background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
				border-radius: 45rpx;
				opacity: 0.4;
				text-align: center;
				line-height: 88rpx;
				position: fixed;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				margin-bottom: 32rpx;
				transition: all 0.3s linear;
			}
			.realName-btn-on{
				opacity: 1;
			}
			
			.realName-success{
				width: 168rpx;
				height: 168rpx;
				margin: 148rpx auto 0;
				
				.realName-success-icon{
					width: 100%;
					height: 100%;
				}
			}
			
			.realName-success-tips{
				text-align: center;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 44rpx;
			}
			
			.realName-view{
				width: 586rpx;
				margin: 60rpx auto 0;
				border-radius: 8rpx;
				border: 1px solid #262A34;
				padding: 76rpx 48rpx;
				box-sizing: border-box;
				
				.realName-view-label{
					font-size: 24rpx;
					font-weight: 400;
					color: #5E6272;
				}
				
				.realName-view-val{
					font-size: 32rpx;
					font-weight: 600;
					color: #FFFFFF;
					border-bottom: 1px solid #262A34;
					padding-bottom: 24rpx;
					padding-top: 24rpx;
				}
			}
		}
	}
</style>
